<script setup>
import {ref} from "vue";
import CommonUse from "./components/commonUse.vue";
import EffectSheet from "./components/effectSheet.vue";
import ConstructSheet from "./components/constructSheet.vue";
import ElectricMachineSheet from "./components/electricMachineSheet.vue";
import Synergism from "./components/synergism.vue";

const selectRoute = ref('effectSheet')
// commonUse
// effectSheet
// constructSheet
// electricMachineSheet
// synergism


</script>

<template>

  <div class="bodyCenter">
    <div class="attrsWarp">
      <div class="attrs">
        <common-use v-if="selectRoute=='commonUse'"></common-use>
        <effect-sheet v-else-if="selectRoute=='effectSheet'"></effect-sheet>
        <construct-sheet v-else-if="selectRoute=='constructSheet'"></construct-sheet>
        <electric-machine-sheet v-else-if="selectRoute=='electricMachineSheet'"></electric-machine-sheet>
        <synergism v-else></synergism>
      </div>


    </div>

  </div>


</template>

<style scoped lang="scss">
.bodyCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.attrsWarp {

  width: 300px;
  height: 100%;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  box-sizing: border-box;
  background-color: #EEEEEE;


}


</style>I